﻿<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml" class="translated-ltr">
<head th:replace="cssloader::cssloader(title)"></head>
<body>
<link type="text/css" href="../static/layui/css/layui.css"/>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/layui/layui.all.js"></script>
<!-- header -->
<header th:replace="component/header::header(${user})"></header>
<!-- end header -->
<!-- main content -->
<main class="main main--breadcrumb">
    <!-- breadcrumb -->
    <div class="breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <ul class="breadcrumb__wrap">
                        <li class="breadcrumb__item"><a href="#"><font style="vertical-align: inherit;"><span
                                style="vertical-align: inherit;">[[${index}]]</span></font></a></li>
                        <li class="breadcrumb__item breadcrumb__item--active"><span
                                style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;">[[title]]</font></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- end breadcrumb -->
    <div class="container">
        <div class="row">
            <div th:replace="component/userinfo::userinfo(${user})"></div>
            <div class="col-12 col-md-7 col-lg-8 col-xl-9">
                <div class="row">
                    <!-- profile -->
                    <div th:if="hascategory" th:replace="component/useritem::followitem(${mystar})"></div>
                    <div th:replace="component/useritem::unfollowitem(${recommends})"></div>
                    <!-- end profile -->

                    <script type="text/javascript" th:inline="javascript">
                        function followit(account) {
                            account = account.split("-")[1];
                            console.log(account);
                            var formData = new FormData();
                            formData.append("follower", [[${user.account}]])
                            formData.append("following", account);
                            var xhr = new XMLHttpRequest();
                            xhr.open("POST", "/follow/followit");
                            xhr.onload = function (ev) {
                                if (xhr.status === 200) {
                                    console.log(xhr);
                                    var responsetext = JSON.parse(xhr.response);
                                    console.log(responsetext);
                                    if (responsetext.ok) {
                                        layer.msg('已成功关注', {icon: 6});
                                        window.setTimeout(function () {
                                            window.location.reload();
                                        },1000);//毫秒
                                        var btn = document.getElementById("btn-" + account);
                                        btn.setAttribute("class", "post__actions-btn post__actions-btn--blue");
                                        btn.innerHTML = '<span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">取关Ta</font></font></span>';
                                        btn.setAttribute("onclick", "unfollowit(this.id)");

                                    } else {
                                        layer.alert("操作失败",{icon: 2});
                                        console.log("btn-" + account.toString());
                                    }
                                } else {
                                    layer.alert("操作失败，请联系管理员!",{icon: 2});
                                }
                            };
                            xhr.send(formData);
                        }

                        function unfollowit(account) {
                            account = account.split("-")[1];
                            console.log(account);
                            var formData = new FormData();
                            formData.append("follower", [[${user.account}]]);
                            formData.append("following", account);
                            console.log(formData);
                            var xhr = new XMLHttpRequest();
                            xhr.open("POST", "/follow/unfollow");
                            xhr.onload = function (ev) {
                                if (xhr.status === 200) {
                                    var res = JSON.parse(xhr.response);
                                    console.log(res);
                                    if (res.ok) {
                                        layer.msg('已取消关注', {icon: 6});
                                        window.setTimeout(function () {
                                            window.location.reload();
                                        },1000);//毫秒
                                        var btn = document.getElementById("btn-" + account);
                                        btn.setAttribute("class", "post__actions-btn post__actions-btn--blue");
                                        btn.innerHTML = '<span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">关注Ta</font></font></span>';
                                        btn.setAttribute("onclick", "followit(this.id)");
                                    } else {
                                        layer.alert("操作失败",{icon: 2});
                                    }
                                } else {
                                    layer.alert("操作失败，请联系管理员!",{icon: 2});
                                }
                            };
                            xhr.send(formData);
                        }

                    </script>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
<div th:replace="jsloader::jsloader"></div>
</html>